Adwaita: Fix color of focus outline on colorswatch

The focus outline disappeared as the colour of the swatch got close to
the normal focus outline colour, which is alpha(currentColor, 0.3).

Fix by making the outline an alpha’d version of the tick colour, but
more opaque than normal outlines. 0.6 seems good enough; feel free to
improve it, but at least this ensures the outline can’t vanish anymore.

HighContrast achieves this already because it applies the color property
to the main node, not the overlay. Doing that means the outline is fully
opaque, which is fine for HC obviously but was excessive for Adwaita.

https://bugzilla.gnome.org/show_bug.cgi?id=787757

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d03dd991255f08d21c0966c3412d5d980a65b63e..4901c1fe3253ca8066dc465adc0f2f9e0ee987ba 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4079,20 +4079,28 @@ colorswatch {
     }
   }
 
-  &.dark overlay {
-    color: white;
+  &.dark {
+    outline-color: transparentize(white, 0.4);
+
+    overlay {
+      color: white;
 
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
+      &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
 
-    &:backdrop { color: transparentize(white, 0.5); }
+      &:backdrop { color: transparentize(white, 0.5); }
+    }
   }
 
-  &.light overlay {
-    color: black;
+  &.light {
+    outline-color: transparentize(black, 0.4);
 
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
+    overlay {
+      color: black;
+
+      &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
 
-    &:backdrop { color: transparentize(black, 0.5); }
+      &:backdrop { color: transparentize(black, 0.5); }
+    }
   }
 
   &:drop(active) {

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 6d582fa94100a6c913ad35a1cf627f04314d3246..70db241a390b86ebfae52ccd42ef66f79bd79e84 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1760,12 +1760,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius
 
 colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
 
+colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); }
+
 colorswatch.dark overlay { color: white; }
 
 colorswatch.dark overlay:hover { border-color: #1b1f20; }
 
 colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); }
 
+colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); }
+
 colorswatch.light overlay { color: black; }
 
 colorswatch.light overlay:hover { border-color: #1b1f20; }

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 3584f3692f32750a066f6002e881e4f911d303cc..1bed44af6ed0376d415c36f86d946c7ac574db0c 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1780,12 +1780,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius
 
 colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
 
+colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); }
+
 colorswatch.dark overlay { color: white; }
 
 colorswatch.dark overlay:hover { border-color: rgba(0, 0, 0, 0.8); }
 
 colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); }
 
+colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); }
+
 colorswatch.light overlay { color: black; }
 
 colorswatch.light overlay:hover { border-color: rgba(0, 0, 0, 0.5); }